<template>
  <div class="success-box">
    <div class="success-list flex_">
      <div class="item" :key="k" v-for="(item, k) in list">
        <div class="download-content">
          <div class="download-top flex_between">
            <div class="left flex_">
              <img :src="item.headUrl" v-if="item.headUrl" class="img" alt="" />
              <img
                src="/static/images/ic_avatar.webp"
                v-else
                class="img"
                alt=""
              />
              <div class="uname">{{ item.userName }}</div>
            </div>
            <div class="right">
              <div class="photo" v-if="!item.isVideo"></div>
              <div class="video" v-else></div>
            </div>
          </div>
          <div class="media-box">
            <img
              :src="item.displayUrl"
              v-if="item.displayUrl"
              class="img"
              alt="Preview"
            />
            <img
              v-else
              src="/static/images/error_placeholder.webp"
              class="img"
              alt="Preview"
            />
            <div class="download-bottom" v-if="item.isVideo" @click="handleDownload(item.actUrl)">
              <div class="button flex_center shou">
                <div class="downloadImg"></div>
                <div >Download Video</div>
              </div>
            </div>
            <div class="download-bottom" v-else>
              <a
                :href="item.actUrl + '&dl=1&dl=1'"
                download
              >
                <div class="button flex_center shou" @click="insDownload">
                  <div class="downloadImg"></div>
                  <div>Download Photo</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="download-footer">
      <a
        target="_blank"
        href="https://play.google.com/store/apps/details?id=ins.freevideodownload.pro"
        class="btn-app flex_center f-14 fw700 c-fff shou"
      >
        Download with app Insta Downloader
      </a>
      <div
        @click="refresh"
        class="gohome flex_center f-14 fw700 c-fff shou flex_"
      >
        <div class="refresh"></div>
        Download more
      </div>
    </div>
    <div class="spinner" v-if="dloading">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>
<script>
import { handleClick, checkString } from "@/plugins/Firebase.js";
export default {
  data() {
    return {
      dloading: false,
    };
  },
  props: {
    list: {
      type: Array,
    },
  },
  mounted() {},
  methods: {
    insDownload() {
      let type = checkString(this.input);
      let from = this.downloadType(this.$route.path);
      //点击下载按钮
      handleClick("action_ins_download_start", {
        from: from,
        type: type,
      });
      //开始下载
      handleClick("ins_download_start", {
        from: from,
        type: type,
      });
    },
    downloadType(form) {
      if (form.includes("igtv-downloader")) {
        return "igtv";
      } else if (form.includes("instagram-photo-download")) {
        return "photo";
      } else if (form.includes("instagram-reels-video-download")) {
        return "reels";
      } else if (form.includes("instagram-story-download")) {
        return "story";
      } else {
        return "video";
      }
    },
    async handleDownload(src) {
      if (this.dloading) return;
      try {
        this.dloading = true;
        const response = await fetch(
          `/webapi/download-mp4?url=${encodeURIComponent(src)}`
        );
        if (response.ok) {
          // 获取响应的文件名
          const contentDisposition = response.headers.get(
            "Content-Disposition"
          );
          // 把响应转换成Blob
          const fileBlob = await response.blob();
          // 创建下载链接，并模拟点击以下载
          const link = document.createElement("a");
          link.href = window.URL.createObjectURL(fileBlob);
          link.download = 'downloaded.mp4';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.dloading = false;
        } else {
          this.dloading = false;
          console.error("Failed to download video:", response.statusText);
        }
        // if (this.dloading) return;
        // try {
        //   this.dloading = true;
        //   const response = await fetch(src);
        //   if (!response.ok) throw new Error("网络响应不好");
        //   const data = await response.blob();
        //   let url = window.URL.createObjectURL(data);
        //   let link = document.createElement("a");
        //   link.href = url;
        //   link.download = "SavingTik-" + new Date().getTime();
        //   document.body.appendChild(link);
        //   link.click();
        //   link.remove();
        //   this.dloading = false;
        // } catch (error) {
        //   this.dloading = false;
        //   console.error("捕获到错误: " + error);
        // }
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    refresh() {
      this.$emit("refresh");
    },
  },
};
</script>
<style lang="scss" scoped>
@media (min-width: 1024px) {
  .spinner {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
  }

  .spinner div {
    position: absolute;
    width: 50%;
    height: 150%;
    background: #000000;
    transform: rotate(calc(var(--rotation) * 1deg))
      translate(0, calc(var(--translation) * 1%));
    animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
  }

  .spinner div:nth-child(1) {
    --delay: 0.1;
    --rotation: 36;
    --translation: 150;
  }

  .spinner div:nth-child(2) {
    --delay: 0.2;
    --rotation: 72;
    --translation: 150;
  }

  .spinner div:nth-child(3) {
    --delay: 0.3;
    --rotation: 108;
    --translation: 150;
  }

  .spinner div:nth-child(4) {
    --delay: 0.4;
    --rotation: 144;
    --translation: 150;
  }

  .spinner div:nth-child(5) {
    --delay: 0.5;
    --rotation: 180;
    --translation: 150;
  }

  .spinner div:nth-child(6) {
    --delay: 0.6;
    --rotation: 216;
    --translation: 150;
  }

  .spinner div:nth-child(7) {
    --delay: 0.7;
    --rotation: 252;
    --translation: 150;
  }

  .spinner div:nth-child(8) {
    --delay: 0.8;
    --rotation: 288;
    --translation: 150;
  }

  .spinner div:nth-child(9) {
    --delay: 0.9;
    --rotation: 324;
    --translation: 150;
  }

  .spinner div:nth-child(10) {
    --delay: 1;
    --rotation: 360;
    --translation: 150;
  }

  @keyframes spinner-fzua35 {
    0%,
    10%,
    20%,
    30%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
      transform: rotate(calc(var(--rotation) * 1deg))
        translate(0, calc(var(--translation) * 1%));
    }

    50% {
      transform: rotate(calc(var(--rotation) * 1deg))
        translate(0, calc(var(--translation) * 1.5%));
    }
  }
  .success-box {
    padding: 20px 0;
    .success-list {
      flex-wrap: wrap;
      .item {
        flex: 0 0 auto;
        width: 33.33333333%;
        padding: 10px;
        padding-top: 20px;
        padding-bottom: 0;
        .download-content {
          border-radius: 6px;
          overflow: hidden;
          position: relative;
          min-height: inherit;
          background: #ffffff;
          border: 1px solid #e3e3e3;

          .download-top {
            padding: 6px 8px;
            gap: 8px;
            .left {
              .img {
                width: 34px;
                height: 34px;
                margin-right: 10px;
                border-radius: 50%;
              }
              .uname {
                font-size: 14px;
                color: #1d212c;
                font-weight: 700;
              }
            }
            .right {
              .photo {
                width: 22px;
                height: 22px;
                background-image: url("@/static/images/photo.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: 22px 22px;
                background-repeat: no-repeat;
              }
              .video {
                width: 22px;
                height: 22px;
                background-image: url("@/static/images/video.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: 22px 22px;
                background-repeat: no-repeat;
              }
            }
          }
          .media-box {
            position: relative;
            width: 100%;
            padding-top: 100%;
            .img {
              max-width: 100%;
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              -o-object-fit: cover;
              object-fit: cover;
            }
            .download-bottom {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              align-items: center;
              padding: 18px 10px 10px 10px;
              gap: 4px;
              a {
                width: 100%;
                height: 100%;
              }
              .button {
                background-color: #433aff;
                border-radius: 6px;
                color: #fff;
                width: 100%;
                padding: 11px;
                font-size: 16px;
                font-weight: 700;
                .downloadImg {
                  margin-right: 10px;
                  width: 22px;
                  height: 22px;
                  background-image: url("@/static/images/download.webp");
                  /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                  background-size: 22px 22px;
                  background-repeat: no-repeat;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 宽度小于1023px
@media (max-width: 1023px) {
  .spinner {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
  }

  .spinner div {
    position: absolute;
    width: 50%;
    height: 150%;
    background: #000000;
    transform: rotate(calc(var(--rotation) * 1deg))
      translate(0, calc(var(--translation) * 1%));
    animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
  }

  .spinner div:nth-child(1) {
    --delay: 0.1;
    --rotation: 36;
    --translation: 150;
  }

  .spinner div:nth-child(2) {
    --delay: 0.2;
    --rotation: 72;
    --translation: 150;
  }

  .spinner div:nth-child(3) {
    --delay: 0.3;
    --rotation: 108;
    --translation: 150;
  }

  .spinner div:nth-child(4) {
    --delay: 0.4;
    --rotation: 144;
    --translation: 150;
  }

  .spinner div:nth-child(5) {
    --delay: 0.5;
    --rotation: 180;
    --translation: 150;
  }

  .spinner div:nth-child(6) {
    --delay: 0.6;
    --rotation: 216;
    --translation: 150;
  }

  .spinner div:nth-child(7) {
    --delay: 0.7;
    --rotation: 252;
    --translation: 150;
  }

  .spinner div:nth-child(8) {
    --delay: 0.8;
    --rotation: 288;
    --translation: 150;
  }

  .spinner div:nth-child(9) {
    --delay: 0.9;
    --rotation: 324;
    --translation: 150;
  }

  .spinner div:nth-child(10) {
    --delay: 1;
    --rotation: 360;
    --translation: 150;
  }

  @keyframes spinner-fzua35 {
    0%,
    10%,
    20%,
    30%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
      transform: rotate(calc(var(--rotation) * 1deg))
        translate(0, calc(var(--translation) * 1%));
    }

    50% {
      transform: rotate(calc(var(--rotation) * 1deg))
        translate(0, calc(var(--translation) * 1.5%));
    }
  }
  .success-box {
    padding: 20px 0;
    .success-list {
      flex-wrap: wrap;
      .item {
        flex: 0 0 auto;
        width: 50%;
        padding: 10px;
        padding-top: 20px;
        padding-bottom: 0;
        .download-content {
          border-radius: 6px;
          overflow: hidden;
          position: relative;
          min-height: inherit;
          background: #ffffff;
          border: 1px solid #e3e3e3;

          .download-top {
            padding: 6px 8px;
            gap: 8px;
            .left {
              .img {
                width: 34px;
                height: 34px;
                margin-right: 10px;
                border-radius: 50%;
              }
              .uname {
                font-size: 14px;
                color: #1d212c;
                font-weight: 700;
              }
            }
            .right {
              .photo {
                width: 22px;
                height: 22px;
                background-image: url("@/static/images/photo.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: 22px 22px;
                background-repeat: no-repeat;
              }
              .video {
                width: 22px;
                height: 22px;
                background-image: url("@/static/images/video.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: 22px 22px;
                background-repeat: no-repeat;
              }
            }
          }
          .media-box {
            position: relative;
            width: 100%;
            padding-top: 100%;
            .img {
              max-width: 100%;
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              -o-object-fit: cover;
              object-fit: cover;
            }
            .download-bottom {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              align-items: center;
              padding: 18px 10px 10px 10px;
              gap: 4px;
              a {
                width: 100%;
                height: 100%;
              }
              .button {
                background-color: #433aff;
                border-radius: 6px;
                color: #fff;
                width: 100%;
                padding: 11px;
                font-size: 16px;
                font-weight: 700;
                .downloadImg {
                  margin-right: 10px;
                  width: 22px;
                  height: 22px;
                  background-image: url("@/static/images/download.webp");
                  /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                  background-size: 22px 22px;
                  background-repeat: no-repeat;
                }
              }
            }
          }
        }
      }
    }
  }
}
// 宽度小于768px
@media (max-width: 768px) {
  .success-box {
    padding: 0px 0;
    .success-list {
      flex-wrap: wrap;
      .item {
        flex: 0 0 auto;
        width: 100%;
        padding: 10px;
        padding-top: 20px;
        padding-bottom: 0;
        .download-content {
          border-radius: 6px;
          overflow: hidden;
          position: relative;
          min-height: inherit;
          background: #ffffff;
          border: 1px solid #e3e3e3;

          .download-top {
            padding: 6px 8px;
            gap: 8px;
            .left {
              .img {
                width: 34px;
                height: 34px;
                margin-right: 10px;
                border-radius: 50%;
              }
              .uname {
                font-size: 14px;
                color: #1d212c;
                font-weight: 700;
              }
            }
            .right {
              .photo {
                width: 22px;
                height: 22px;
                background-image: url("@/static/images/photo.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: 22px 22px;
                background-repeat: no-repeat;
              }
              .video {
                width: 22px;
                height: 22px;
                background-image: url("@/static/images/video.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: 22px 22px;
                background-repeat: no-repeat;
              }
            }
          }
          .media-box {
            position: relative;
            width: 100%;
            padding-top: 100%;
            .img {
              max-width: 100%;
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              -o-object-fit: cover;
              object-fit: cover;
            }
            .download-bottom {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              align-items: center;
              padding: 18px 10px 10px 10px;
              gap: 4px;
              .button {
                background-color: #433aff;
                border-radius: 6px;
                color: #fff;
                width: 100%;
                padding: 11px;
                font-size: 16px;
                font-weight: 700;
                .downloadImg {
                  margin-right: 10px;
                  width: 22px;
                  height: 22px;
                  background-image: url("@/static/images/download.webp");
                  /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                  background-size: 22px 22px;
                  background-repeat: no-repeat;
                }
              }
            }
          }
        }
      }
    }
  }
}
.download-footer {
  margin-top: 30px;
  .btn-app {
    padding: 11px;
    background-color: #dd34ab;
    border-radius: 6px 6px 6px 6px;
    width: 100%;
  }
  .gohome {
    background-color: #1d212c;

    margin-top: 14px;
    padding: 11px;
    border-radius: 6px 6px 6px 6px;
    width: 100%;
    .refresh {
      margin-right: 10px;
      width: 16px;
      height: 16px;
      background-image: url("@/static/images/refresh.webp");
      /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }
  }
}
</style>